<template>
  <div class="conversation-list">
    <div class="list-header">
      <h3>对话历史</h3>
      <el-button type="primary" size="small" @click="newConversation">新对话</el-button>
    </div>
    
    <el-input
      v-model="searchQuery"
      placeholder="搜索对话..."
      prefix-icon="Search"
      clearable
    />
    
    <el-empty v-if="filteredConversations.length === 0" description="暂无对话历史"></el-empty>
    
    <div class="conversations">
      <el-scrollbar>
        <div 
          v-for="conversation in filteredConversations" 
          :key="conversation.id"
          :class="['conversation-item', activeId == conversation.id ? 'active' : '']"
          @click="selectConversation(conversation.id)"
        >
          <div class="conversation-title">
            <i class="el-icon-chat-dot-round"></i>
            {{ conversation.title }}
          </div>
          <div class="conversation-date">{{ formatDate(conversation.created_at) }}</div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import aiService from '@/services/aiService';
import { ElMessage } from 'element-plus';

export default {
  name: 'ConversationList',
  props: {
    activeId: {
      type: [Number, String],
      default: null
    }
  },
  emits: ['select-conversation'],
  setup(props, { emit }) {
    const conversations = ref([]);
    const searchQuery = ref('');
    const router = useRouter();
    
    const filteredConversations = computed(() => {
      if (!searchQuery.value) return conversations.value;
      
      const query = searchQuery.value.toLowerCase();
      return conversations.value.filter(conv => 
        conv.title.toLowerCase().includes(query)
      );
    });
    
    const loadConversations = async () => {
      try {
        const response = await aiService.getConversations();
        conversations.value = response.data.data;
      } catch (error) {
        ElMessage.error('加载对话历史失败');
        console.error('加载对话历史错误:', error);
      }
    };
    
    const selectConversation = (id) => {
      emit('select-conversation', id);
    };
    
    const newConversation = () => {
      router.push('/ai-assistant');
    };
    
    const formatDate = (dateString) => {
      const date = new Date(dateString);
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
    };
    
    onMounted(() => {
      loadConversations();
    });
    
    return {
      conversations,
      searchQuery,
      filteredConversations,
      selectConversation,
      newConversation,
      formatDate
    };
  }
};
</script>

<style scoped>
.conversation-list {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-right: 1px solid #e0e0e0;
  background-color: #f8f9fa;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
}

.list-header h3 {
  margin: 0;
}

.el-input {
  margin: 16px;
  width: calc(100% - 32px);
}

.conversations {
  flex-grow: 1;
  overflow-y: auto;
}

.conversation-item {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  transition: background-color 0.2s;
}

.conversation-item:hover {
  background-color: #f0f0f0;
}

.conversation-item.active {
  background-color: #ecf5ff;
  border-left: 3px solid #409eff;
}

.conversation-title {
  font-weight: 500;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-date {
  font-size: 12px;
  color: #999;
}
</style> 